<template>
  <div class="inspection-detail">
    <!-- 顶部导航栏 -->
    <van-nav-bar
        title="巡检计划详情"
        left-arrow
        @click-left="onClickLeft"
    />

    <!-- 基本信息区域 -->
    <van-cell-group title="基本信息">
      <van-cell title="计划名称" :value="planInfo.name" />
      <van-cell title="计划类型" :value="planInfo.type" />
      <van-cell title="开始时间" :value="planInfo.startTime" />
      <van-cell title="执行项室" :value="planInfo.executors" />
    </van-cell-group>

    <!-- 巡检信息区域 -->
    <van-cell-group title="巡检信息">
      <van-cell
          v-for="(device, index) in devices"
          :key="index"
          :title="`门禁前机${index + 1}`"
          :value="device.code"
      />
    </van-cell-group>

    <!-- 底部按钮 -->
    <div class="bottom-button">
      <van-button type="primary" block @click="onReturn">返回</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XunjianXQZView',
  data() {
    return {
      planInfo: {
        name: '空调巡检',
        type: '智能巡检',
        startTime: '8:00',
        executors: '6号、16号、19号、25号'
      },
      devices: Array(11).fill().map((_, index) => ({
        code: 'SB11232132188213123'
      }))
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onReturn() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.inspection-detail {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background-color: #fff;
}
</style>